<template>
    <div>
      <div class="bottom-show">
        <el-card class="card note" v-for="item in notes" :key="item.noteId">
          <div class="left-image">
            <el-avatar :src="item.imageUrl"></el-avatar>
          </div>
          <div class="right-content">
            <div class="top_option">
              <div class="name">
                <a>{{item.nickname}}</a>
              </div>
              <div class="forward">
                <span class="fs" v-if="item.isForward==null" @click="toForward(item)">转发</span>
                <span class="fsd" v-else >已转发</span>
              </div>
            </div>
            <div class="content-div">
              <div v-html="item.content" ></div>
            </div>
            <div class="image-bottom" v-if="item.screenShot==1">
              <div class="image-box">
                <el-image :src="item.screenUrl"
                  :preview-src-list="[item.screenUrl]"
                ></el-image>
                <i class="time">{{parseInt(item.videoTime / 60000)}}:{{parseInt(item.videoTime / 1000 % 60)}}</i>
              </div>
              <a></a>
            </div>
            <div class="bottom-option">
              <div class="sectionName">源自：
                <span @click="toLearn(item.sectionId, item.courseId)">{{item.sectionName}}</span>
              </div>
              <div class="creatTime">{{item.createTime}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'CourseNote',
  props: ['courseId', 'isStudy'],
  data () {
    return {
      notes: []
    }
  },
  mounted () {
    this.getListNote()
  },
  computed: mapState({
    user: 'user'
  }),
  methods: {
    getListNote () {
      var _this = this
      var noteQueryData = {}
      noteQueryData.courseId = this.courseId
      noteQueryData.userId = this.user.userId
      if (this.$route.query.sectionId != null) {
        noteQueryData.sectionId = this.$route.query.sectionId
      }
      this.$axios.post('/api/note/getListNote',
        this.$qs.stringify({
          noteQueryData: JSON.stringify(noteQueryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          var result = data.result
          _this.notes = result
        }
      })
    },
    toLearn (sectionId, courseId) {
      var _this = this
      // studySection 操作 ★★★★★★★★★
      this.$axios.post('/api/studied/studySection',
        this.$qs.stringify({
          courseId: courseId,
          sectionId: sectionId,
          userId: this.user.userId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$router.push(
            {path: '/video',
              query: {
                sectionId: sectionId,
                courseId: courseId,
                path: _this.$route.fullPath
              }
            }
          )
        }
      })
    },
    toForward (note) {
      var _this = this
      var noteData = {}
      noteData.userId = this.user.userId
      noteData.courseId = this.courseId
      noteData.sectionId = note.sectionId
      noteData.content = note.content
      noteData.screenShot = note.screenShot
      noteData.videoTime = note.videoTime
      noteData.screenUrl = note.screenUrl
      noteData.createTime = note.createTime
      noteData.remove = note.remove
      noteData.forward = 1
      noteData.forwardUserId = note.userId
      noteData.forwardUserNickname = note.nickname
      noteData.forwardNoteId = note.noteId
      noteData.view = note.view
      noteData.star = note.star
      this.$axios.post('/api/note/add',
        this.$qs.stringify({
          noteData: JSON.stringify(noteData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$message({
            type: 'success',
            message: '成功'
          })
          note.isForward = 1
        } else {
          _this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
        .catch(function () {
          _this.$message({
            type: 'error',
            message: '失败'
          })
        })
    }
  }
}
</script>

<style>
  .bottom-show {
    text-align: left;
  }
  .bottom-show .card{
    margin-bottom: 13px;
  }
  .card .left-image{
    width:80px;
    text-align: center;
    float: left;
  }
  .note .right-content {
    padding-right: 20px;
    min-height: 85px;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
  .content-div{
    min-height: 60px;
  }
  .right-content .top_option{
    margin-bottom: 5px;
  }
  .right-content .name {
    font-weight: bolder;
    display: inline-block;
  }
  .bottom-option{
    margin-top: 10px;
    color: #93999f;
    font-size: 14px;
  }
  .right-content .sectionName{
    display: inline-block;
  }

  .right-content .sectionName span{
    cursor: pointer;
  }
  .right-content .sectionName span:hover{
    color: #67C23A;
    font-weight: bold;
  }
  .right-content .forward{
    display: inline-block;
    float: right;
  }
  .right-content .forward span{
    cursor: pointer;
    font-size: 14px;
  }
  .right-content .forward span:hover{
    cursor: pointer;
    color: #000;
  }
  .right-content .forward .fs{
    color: gray;
  }
  .right-content .forward .fsd{
    color: gray;
  }
  .right-content .creatTime{
    display: inline-block;
    float:right;
  }
  .image-bottom{
    margin-bottom: 10px;
  }
  .image-bottom .image-box{
    display: inline-block;
    width: 160px;
    height: 90px;
  }
  .image-box .time{
    position: absolute;
    left: 0;
    padding: 0 5px;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
    color: #fff;
    z-index: 1;
    background-color: rgba(0,0,0,.4);
  }
  .image-box .el-icon-circle-close{
    color: #FFF;
  }
</style>
